<template>
    <el-dialog :visible="visible" @close="close" title="Attachment" width="60%">
        <el-form label-width="100px">
            <el-form-item label="Image">
                <el-upload
                        :on-success="successLoad"
                        accept="image/*"
                        :on-remove="removeImage"
                        class="upload-demo"
                        list-type="picture"
                        :file-list="imageList"
                        drag
                        name="upload_file"
                        :action="url"
                        multiple>
                    <i class="el-icon-upload"></i>
                    <div class="el-upload__text">Drag here，or <em>Click to upload</em></div>
                </el-upload>
            </el-form-item>
            <el-form-item label="Video">
                <el-upload
                        :on-success="successLoad1"
                        accept="video/*"
                        :on-remove="removeImage1"
                        class="upload-demo"
                        list-type="picture"
                        :file-list="videoList"
                        drag
                        name="upload_file"
                        :action="url"
                        multiple>
                    <i class="el-icon-upload"></i>
                    <div class="el-upload__text">Drag here，or <em>Click to upload</em></div>
                </el-upload>
            </el-form-item>
            <el-form-item label="File">
                <el-upload
                        :on-success="successLoad2"
                        :on-remove="removeImage2"
                        class="upload-demo"
                        list-type="picture"
                        :file-list="fileList"
                        drag
                        name="upload_file"
                        :action="url"
                        multiple>
                    <i class="el-icon-upload"></i>
                    <div class="el-upload__text">Drag here，or <em>Click to upload</em></div>
                </el-upload>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
                        <el-button @click="close">Cancel</el-button>
                        <el-button type="primary" @click="sub">Confirm</el-button>
        </span>
    </el-dialog>
</template>

<script>
    import {baseURL} from "../../util";

    function revert(arr) {
        if (!arr || !arr.length) return [];
        return arr.map(item => {
            return {
                name: item,
                url: item
            }
        })
    }
    export default {
        name: "problem",
        props: {
            picture: Array,
            video: Array,
            file: Array,
            visible: Boolean
        },
        data() {
            const pictures = [...this.picture],
                  videos = [...this.video],
                  files = [...this.file];
            return {
                url:baseURL+'/file/uploadFileCDN',
                imageList:[],
                videoList:[],
                fileList:[],
                pictures,
                videos,
                files,
            }
        },
        methods: {
            close() {
                this.$emit('close')
            },
            sub() {
                this.$emit('sub', {problemPhoto: this.pictures, problemVideo: this.videos, problemFile: this.files});
                this.pictures = [];
                this.videos = [];
                this.files = []
            },
            successLoad(res) {
                if (this.pictures) {
                    this.pictures = this.pictures.concat(res.file_path)
                } else {
                    this.pictures = res.file_path
                }
            },
            removeImage(file) {
                if (this.pictures) {
                    const index = this.pictures.findIndex(img => {
                        return !img || img.url === file.url
                    });
                    this.pictures.splice(index, 1)
                }
            },
            successLoad1(res) {
                if (this.videos) {
                    this.videos = this.videos.concat(res.file_path)
                } else {
                    this.videos = res.file_path
                }
            },
            removeImage1(file) {
                if (this.videos) {
                    const index = this.videos.findIndex(img => {
                        return !img || img.url === file.url
                    });
                    this.videos.splice(index, 1)
                }
            },
            successLoad2(res) {
                if (this.files) {
                    this.files = this.files.concat(res.file_path)
                } else {
                    this.files = res.file_path
                }
            },
            removeImage2(file) {
                if (this.files) {
                    const index = this.files.findIndex(img => {
                        return !img || img.url === file.url
                    });
                    this.files.splice(index, 1)
                }

            },
        },
        watch:{
            picture(picture){
                this.imageList = revert(picture);
            },
            video(video){
                this.videoList = revert(video)
            },
            file(file){
                this.fileList = revert(file)
            }
        }
    }
</script>

<style scoped lang="scss">

</style>